<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jq/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        $(function(){
            // 1.直接使用事件名方法   jQuery对象.事件名(函数)
            // $("#btn").click(function(){
            //     console.log("点击事件");
            // });
            // 2.使用on或者bind(bind3.0-)  jQuery对象.on("事件名",函数)  jQuery对象.bind("事件名",函数)
            // $("#btn").on("mouseover",function(){
            //     console.log("鼠标悬浮事件")
            // });
            // $("#btn").on("mouseout",function(){
            //     console.log("鼠标离开事件")
            // });

            // 3.使用on或者bind同时绑定多个事件  jQuery对象.on(对象)  jQuery对象.bind(对象)
            // $("#btn").on({
            //     "click":function(){
            //         console.log(111);
            //     },
            //     "mouseover":function(){
            //         console.log("鼠标悬浮事件");
            //     },
            //     "mouseout":function(){
            //         console.log("鼠标离开事件");
            //     }
            // });

            // 4.使用one来绑定一次性事件
            // $("#btn").one("click",function(){
            //     console.log("只触发一次");
            // });

            //5.复合事件

            // mouseenter  mouseleave
            $("#btn").hover(function(){
                console.log("鼠标悬浮");
            },function(){
                console.log("鼠标离开");
            });


            $("#btn2").on("click",function(){
                // jQuery对象.off('事件名1 事件名2 事件名3')   jQuery对象.unbind() 
                // jQuery对象.off()移除所有事件

                // $("#btn").off("click mouseover");
                $("#btn").off();

            });

            



        });
    </script>
</head>
<body>
    <input type="button" value="绑定事件的方式" id="btn">
    <input type="button" value="移除事件" id="btn2">
</body>
</html>